<script setup lang="ts">
import { toRefs } from 'vue';

import { ElDialog, ElMessage } from 'element-plus';

import { getMtdeUrl } from '#/utils';

interface Era {
  title: string;
  period: string;
  description: string;
  backgroundImage: string;
}

const props = defineProps({
  isJump2EraShow: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits<{
  (e: 'update:selectedRange', value: [number, number]): void;
  (e: 'closeJump2eraShowDialog'): void;
}>();
const closeJump2eraShowDialog = () => {
  emit('closeJump2eraShowDialog');
};
const { isJump2EraShow } = toRefs(props);
const getCentralRange = (period: string): [number, number] => {
  const [startStr, endStr] = period.split(' - ');
  const parseYear = (str: string): number => {
    return str.includes('BC')
      ? -Number.parseInt(str.replace('BC', '').trim())
      : Number.parseInt(str.trim());
  };
  const startYear = parseYear(startStr as string);
  const endYear = parseYear(endStr as string);

  const center = Math.round((startYear + endYear) / 2);
  let start = Math.floor((center - 25) / 10) * 10;

  if (start < -3200) {
    start = -3200;
    ElMessage({
      message: '起始时间早于时间轴范围（3200BC），已自动调整为最早支持时间。',
      type: 'warning',
    });
  } else if (start > 1900) {
    start = 1850;
    ElMessage({
      message: '起始时间晚于时间轴范围（1900AD），已自动调整为最晚支持时间。',
      type: 'warning',
    });
  }

  const end = start + 50;

  emit('update:selectedRange', [start, end]);
  closeJump2eraShowDialog();
  return [start, end];
};

const eras: Era[] = [
  {
    title: '铜石并用时代',
    period: '4000BC - 2500BC',
    description:
      '铜石并用时代是新石器与青铜时代的过渡期，石器为主，红铜器初见端倪，人类生产工具迈入金属时代的初始阶段。',
    backgroundImage: `${getMtdeUrl('history_background01')}`,
  },
  {
    title: '青铜时代',
    period: '2500BC - 1200BC',
    description:
      '青铜时代以合金技术广泛应用为标志，人类开始用铜锡合金铸造工具和武器，推动了冶金技术与社会组织的进步。',
    backgroundImage: `${getMtdeUrl('history_background02')}`,
  },
  {
    title: '铁器时代',
    period: '1200BC - 1468',
    description:
      '铁器成为主要工具和武器，农业与战争技术革新，社会结构发生深刻变化，推动了更大范围的文明传播与交流。',
    backgroundImage: `${getMtdeUrl('history_background03')}`,
  },
  {
    title: '大航海时代',
    period: '1469 - 1764',
    description:
      '欧洲国家为寻找新航线而远洋探索，促成了全球贸易兴起与文化交流，世界开始走向真正的互联格局。',
    backgroundImage: `${getMtdeUrl('history_background04')}`,
  },
  {
    title: '蒸汽时代',
    period: '1764 - 1869',
    description:
      '蒸汽机的广泛使用推动了工业革命，机器代替人力成为主流，社会进入机械化与城市化快速发展的阶段。',
    backgroundImage: `${getMtdeUrl('history_background05')}`,
  },
  {
    title: '电气时代',
    period: '1870 - 1941',
    description:
      '电力广泛应用，催生出现代工业体系，科技进步集中于钢铁、化工、电灯、铁路等领域，工业格局重新洗牌。',
    backgroundImage: ` ${getMtdeUrl('history_background06')}`,
  },
];
</script>
<template>
  <ElDialog
    width="85vw"
    class="rounded-lg bg-white p-6 shadow-md"
    v-model="isJump2EraShow"
    align-center
    @close="closeJump2eraShowDialog"
    destroy-on-close
  >
    <h2 class="mb-6 text-2xl font-bold">你想前往哪个时代?</h2>

    <div class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-6">
      <div
        v-for="(era, index) in eras"
        :key="index"
        class="h-[370px] overflow-hidden rounded-lg"
        :style="{
          backgroundImage: `url(${era.backgroundImage})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }"
      >
        <div class="flex h-full flex-col bg-black/20 p-4">
          <!-- Badge -->
          <div
            class="mb-2 cursor-pointer self-end rounded-sm bg-green-500 px-2 py-1 text-sm text-white"
            @click="getCentralRange(era.period)"
          >
            立即前往
          </div>

          <!-- Content -->
          <div class="mt-auto">
            <h3 class="text-xl font-medium text-white">{{ era.title }}</h3>
            <p class="mb-3 text-sm text-white/90">{{ era.period }}</p>
            <p class="text-sm leading-tight text-white/80">
              {{ era.description }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </ElDialog>
</template>
